<template>
<!--  <div id="app" :style="{ transform: 'scale('+w+','+h+')', height:'calc(929px * '+ h+')'}">-->
  <div id="app">
    <div v-if="loginShowDiv">
      <Login @hiddenLogin="hiddenLogin" />
    </div>
<!--    <el-dialog title="" :visible.sync="loginShowDiv">-->
<!--      <Login />-->
<!--    </el-dialog>-->

    <div v-if="!loginShowDiv">
      <el-container class="route_div">
      <el-header class="header">
        <el-row style="">
          <el-col :span="24">
            <el-col :span="5" class="home fsn index" @click="home">
              Junyi Facade consultation service
<!--              <div>-->
<!--                <img src="@/assets/icon/log1.png" alt="">-->
<!--              </div>-->
<!--              <div>-->
<!--                智能管理平台-->
<!--              </div>-->

<!--              <imelg src="../assets/icon/pg.png" />-->
              <!--<i @click="home" class="el-icon-s-home"></i>-->

            </el-col>
            <el-col :span="16">
              <el-menu style="border-right: none"
                       mode="horizontal"
                       :default-active="activateMenu"
                       :router=true
                       class="el-menu-vertical-demo"
                       @open=""
                       @close=""
                       background-color="#ffffff"
                       text-color="#003047"
                       active-text-color="#209E91">

                <template v-for="(d,didx) in menuList">

                  <el-menu-item :index="d.url" v-if="!d.children">
                    <i :class="d.icon"></i>
                    <span style="font-weight: bold">{{d.title}}</span>
                  </el-menu-item>

                  <el-submenu :index='d.id' v-if="d.children">
                    <template slot="title">
                      <i :class="d.icon"></i>
                      <span>{{d.title}}</span>
                    </template>

                    <el-menu-item-group :key="cidx" v-for="(c,cidx) in d.children" v-if="d.children != null">
                      <el-menu-item :index="c.url">{{c.title}}</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>

                </template>
              </el-menu>
            </el-col>
            <el-col :span="3" align="right">
              <el-dropdown @command="handleCommand">
                <span class="demonstration" style="cursor: pointer;color: #ffffff;line-height: 60px">{{user.name}}</span>
                <!--<el-button type="primary">-->
                <!--更多菜单<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                <!--</el-button>-->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="update">修改资料</el-dropdown-item>
                  <el-dropdown-item command="updatepassword">修改密码</el-dropdown-item>
                  <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </el-col>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
    </div>
<!-- 左右菜单 -->
<!--    <el-container class="route_div">-->
<!--      <el-header class="header">-->
<!--          <el-row style="margin-top: 10px;">-->
<!--            <el-col :span="24">-->
<!--              <el-col :span="20" class="home fsn" @click="home">-->
<!--                &lt;!&ndash;<i @click="home" class="el-icon-s-home"></i>&ndash;&gt;-->
<!--                智能管理平台-->
<!--              </el-col>-->
<!--              <el-col :span="4" align="right">-->
<!--                <el-dropdown @command="handleCommand">-->
<!--                  <span class="demonstration" style="cursor: pointer;color: #ffffff">{{user.name}}</span>-->
<!--                  &lt;!&ndash;<el-button type="primary">&ndash;&gt;-->
<!--                  &lt;!&ndash;更多菜单<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&ndash;&gt;-->
<!--                  &lt;!&ndash;</el-button>&ndash;&gt;-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item command="update">修改资料</el-dropdown-item>-->
<!--                    <el-dropdown-item command="updatepassword">修改密码</el-dropdown-item>-->
<!--                    <el-dropdown-item command="logOut">退出登录</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->

<!--              </el-col>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--      </el-header>-->


<!--      <el-container>-->
<!--        <el-aside>-->
<!--          <el-row class="tac">-->
<!--            <el-col>-->
<!--              <el-menu style="border-right: none"-->
<!--                :default-active="activateMenu"-->
<!--                :router=true-->
<!--                class="el-menu-vertical-demo"-->
<!--                @open=""-->
<!--                @close=""-->
<!--                background-color="#ffffff"-->
<!--                text-color="#003047"-->
<!--                active-text-color="#209E91">-->

<!--                <template v-for="d,didx in menuList">-->

<!--                  <el-menu-item :index="d.url" v-if="!d.children">-->
<!--                    <i :class="d.icon"></i>-->
<!--                    <span style="font-weight: bold">{{d.title}}</span>-->
<!--                  </el-menu-item>-->

<!--                <el-submenu :index='d.id' v-if="d.children">-->
<!--                  <template slot="title">-->
<!--                    <i :class="d.icon"></i>-->
<!--                    <span>{{d.title}}</span>-->
<!--                  </template>-->

<!--                  <el-menu-item-group :key="cidx" v-for="c,cidx in d.children" v-if="d.children != null">-->
<!--                    <el-menu-item :index="c.url">{{c.title}}</el-menu-item>-->
<!--                  </el-menu-item-group>-->
<!--                </el-submenu>-->

<!--                </template>-->
<!--              </el-menu>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </el-aside>-->
<!--        <el-container>-->
<!--          <el-main>-->
<!--            <router-view/>-->
<!--          </el-main>-->
<!--        </el-container>-->
<!--      </el-container>-->
<!--    </el-container>-->


    <el-dialog title="修改基本信息" :visible.sync="show.updateinfodl" :append-to-body="true">

      <el-form ref="form" :rules="userRules" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="btnSubmit" type="primary" @click="updateinfo('form')">提交</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="show.updatepassworddl" :append-to-body="true">

      <el-form ref="passwordfrom" :rules="passwordRules" :model="passwordfrom" label-width="80px">
        <el-form-item label="旧密码" prop="passwordold">
          <el-input v-model="passwordfrom.passwordold" placeholder="请输入密码"  show-password class="input_login"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="password">
          <el-input v-model="passwordfrom.password" placeholder="请输入密码"  show-password class="input_login"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password1">
          <el-input v-model="passwordfrom.password1" placeholder="请输入密码"  show-password class="input_login"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btnSubmit" type="primary" @click="updatePassoird('passwordfrom')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import VueCookies from 'vue-cookies'
  import Login from "./components/Login"
export default {
  name: 'App',
  components:{
    Login
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.passwordfrom.password1 !== '') {
          this.$refs.passwordfrom.validateField('password1');
        }
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.passwordfrom.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      h: null,
      w: null,
      activateMenu:'',
      isLogin: false,
      loginShowDiv:false,
      menuList:[],
      show:{
        updateinfodl: false,
        updatepassworddl:false
      },
      user:{},
      form: {
        name: '',
        phone: ''
      },
      passwordfrom:{
        passwordold:'',
        password:'',
        password1:''

      },
      userRules: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {max: 20, message: '长度在小于 20 个字符', trigger: 'blur'}
        ],
        phone:[
          {required: true, message: '请输入电话', trigger: 'blur'},
          {max: 20, message: '长度在小于20个字符', trigger: 'blur'}
        ]
      },
      passwordRules: {
        passwordold: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {validator: validatePass, trigger: 'blur'},
          {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        password1: [
          { validator: validatePass1, trigger: 'blur' }
        ]
      }
    }
  },
  methods:{
    setscale(){
      let w_h = window.innerHeight
      let w_w = window.innerWidth
      this.h = w_h / 929
      this.w = w_w / 1920
    },
    showLogin(){
      this.loginShowDiv = true
    },
    hiddenLogin(){
      console.info('hiddenLogin')
      this.loginShowDiv = false
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    },
    handleCommand(command){
      if(command=='update'){
        this.show.updateinfodl = true
      } else if(command=='updatepassword'){
        this.show.updatepassworddl = true
      } else if(command=='logOut'){
        this.loginShowDiv = true
        window.vm.$cookies.remove('token')
      }
    },
    updateinfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/admin/user/my-update'
          this.$axios.post(url, {
            name:this.form.name,
            phone:this.form.phone,
            dctId:this.user.dctId
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.show.updateinfodl=false
            this.user.name=this.form.name
            this.user.phone = this.form.phone

            this.$axios.get('/admin/user/info', {
              params: {
              }
            }).then(r => {
              let  res = r.data
              window.vm.$cookies.set('user',res.data)
              location.reload()
            }).catch(() => {

            });
          })
        } else {
          return false;
        }
      });
    },

    updatePassoird(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '/admin/user/my-password-update'
          this.$axios.get(url, {
            params: {
              oldPassword:this.passwordfrom.passwordold,
              password:this.passwordfrom.password,
            }
          }).then(r => {
            let  res = r.data
            this.$message.error(res.msg)
            if (res.code !== 1) {
              return
            }
            this.loginShowDiv = true
            window.vm.$cookies.remove('token')
          })
        } else {
          return false;
        }
      });
    },
    home(){
      this.activateMenu='/'
      this.$router.push('/')
//      window.location.href='/admin-web'
    },

  defaultMenu(){
    this.$router.onReady(() => {
      let path = this.$route.path
      this.activateMenu=path.replace('/','');
    })

  },


  },
  mounted: function () {
    // 注册后可全局调用
    window.showLogin = this.showLogin
    window.hiddenLogin = this.hiddenLogin
    window._uploadurl_ = this.$axios.defaults.baseURL+'admin/file/upload'
  },
  created: function () {

    //浏览器放大缩小事件
    this.$nextTick(() => {
      this.setscale();
      // this.resizeFun窗口变化执行的方法
      window.addEventListener("resize", this.setscale);
    })

    this.defaultMenu()
    const token=$cookies.get('token')
    if (token == null){
      this.showLogin();
      return
    }

    this.user = $cookies.get('user')
    if (this.user==null){
      this.user={}
    }
    this.form.name=this.user.name
    this.form.phone=this.user.phone

    this.$axios.get('/admin/user/menu', {
      params: {roleId: this.id}
    }).then(r => {
      let res = r.data
      if (res.code !== 1) {
        this.$message.error(res.msg)
        return
      }
      this.menuList = res.data
    })

  }
}
</script>

<style>
  html{
    margin: 0px;
    padding: 0px;
  }
  body{
    margin: 0px;
    padding: 0px;
  }
  body::-webkit-scrollbar{
    display: none;
  }
  ::-webkit-scrollbar{
    display:none;
  }
  a{
    cursor: pointer;
  }

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  /*height: 100vh;
  height: 929px;
  width: 1920px;
  transform-origin: 0 0;
  margin-left: max(calc((100vw - 1920px) / 2), 0.001px);*/
}

/**
font-size
*/
.fsn{
  font-size: 20px
}
.fst{
  font-size: 18px;
}
.fsts{
  font-size: 16px;
}




.el-menu{
  /*height: 100vh;*/
  border-right:none;
}
.pagination{
  margin-top: 10px;
}
  .cf_icon{
    height: 100px;
    width: 100px;
    border-radius: 10%;
  }
  .tac{
    height: calc(100vh - 60px);
    /*background: #545c64;*/
    background-color:#001962!important;
    overflow: scroll;
  }
  .header{
    /*box-shadow: 0 10px 5px #888888;*/
    background: #061d63;
    color: #ffffff;
    line-height: 40px;
    z-index: 9;
  }
  ._el_tag > span{
    margin-top: 2px;
    margin-right: 2px;
  }
  .home{
    cursor: pointer;
    font-weight: bold;
    line-height: 60px;
  }
  .tox-tinymce-aux{z-index:99999 !important;}
  .tinymce.ui.FloatPanel{z-Index: 99;}

  /*.el-submenu .el-menu,.el-submenu .el-menu li{*/
    /*background-color:rgb(51,51,51)!important;*/
  /*}*/
  .el-dialog__body{
    max-height: 80vh;
    overflow: scroll;
  }
  .c-el-dig{
    max-height: 70vh;
    width:80%!important;
  }

  .c-el-fdig{
    max-height: 70vh;
    width:80%!important;
  }
  .div-inline{
    line-height: 50px;
  }
  .div-inline>div{
    display: inline-block;
  }
  .div-inline>div:first-child{
    width: 100px;
    text-align: left;
  }
  .div-inline>div:last-child{
    text-align: left;
  }
  /************修改导航样式**********/
  .el-menu{
    background-color:#001962!important;
  }
  .el-menu .el-menu-item{
    background-color:#001962!important;
    color: white!important;
  }
  .el-menu .el-submenu{
    background-color:#001962!important;
    color: white!important;
  }
  .el-menu .el-submenu div{
    background-color:#001962!important;
    color: white!important;
  }
  .el-menu.el-menu--horizontal{
    border-bottom: none!important;
  }

  /* 设置导航高度 原60px 修改为 40px */
  .el-menu--horizontal>.el-menu-item{
    height: 40px!important;
    line-height: 40px!important;
    margin-top: 10px!important;
  }



  /***********框架修改开始************/
  /*******修改选中导航样式**********/
  .is-active{
    background-color: #209e91!important;
    /*
    border-radius: 50px;
    去掉圆角
     */
    color: #ffffff!important;
  }
  /* 导航选中样式 */
  .el-menu-item.is-active {
    background: #0b6dff !important;
    border-radius: 10px;
    border-bottom-color: #0b6dff !important;
  }
  .el-submenu__title.is-active {
    background: #0b6dff !important;
    border-radius: 10px;
  }

  /*** 修改导航左右间距***/
  .el-menu-item{
    margin-left:10px!important;
    margin-right: 10px!important;
  }
  /*******导航样式**********/
  .el-submenu__title{
    font-size: 14px;
    font-weight: bold;
    color: #003047;
  }
  /*******导航鼠标移入样式**********/
  .el-submenu__title:hover {
    background-color: #0b6dff!important;
    border-radius: 10px;
    color: #ffffff!important;
  }
  /*******导航鼠标移入图标样式**********/
  .el-submenu__title:hover i{
    color: #ffffff!important;
  }
  .el-menu-item:hover{
    background-color: #0b6dff!important;
    border-radius: 10px;
    /*
    border-radius: 50px;
    去掉鼠标移入圆角
     */
    color: #ffffff!important;
    background-color: transparent!important;
  }
  .el-submenu__title i{
    color: white!important;
    font-weight: bold;
  }
  .el-menu-item i{
    color: white!important;
  }

  /*******表格鼠标移入图标样式**********/
  .el-table{
    color: #000000;
  }
.el-table__row:hover{
  background: #eff8f7!important;
  box-shadow: 0px 10px 20px 0px rgba(133,133,133,0.31)!important;
}
  .el-table__row:hover>td{
    background: #eff8f7!important;
    /*box-shadow: 0px 10px 20px 0px rgba(133,133,133,0.31);*/
  }
  .tableheader{
    font-weight: bold;
    color: #000000;
  }
  .tableheader th{
    font-weight: bold;
  }
  /********** input 样式 ************/
  .el-input__inner{
    background: #ffffff;
    border: 1px solid #048dff;
    border-radius: 10px;
  }
  .el-form-item__label{
    font-weight: 500;
    color: #000000;
  }
  .el-dialog{
    background: #ffffff!important;
    border-radius: 10px!important;
    box-shadow: 0px 10px 10px 0px rgba(36,100,92,0.10)!important;
  }
  .el-dialog__header{
    background: #f0f8ff;
    border-radius:10px 10px 0px 0px!important;
    font-weight:bold!important;
    min-height:30px!important;
  }
  .el-textarea__inner{
    background: #ffffff!important;
    border: 1px solid #048dff!important;
    border-radius: 10px!important;
  }
  .el-dialog .el-table{
    height: calc(-220px + 100%)!important;
  }
  .el-dialog .el-table__body-wrapper{
    height: calc(50vh - 220px);
  }

  .el-button--primary{
    background-color: #b3ddff!important;
    border-color:#b3ddff!important;
    color: #048dff!important;
  }


  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom:5px solid #409EFF!important;
    border-bottom-color:#409EFF!important;
  }


  /***********框架修改结束************/



  /************* 操作样式 **************/
  .opt1{
    color: #4cbafe!important;
    background: rgba(76,186,254,0.15)!important;
    font-weight: bold!important;
    border-radius: 13px!important;
  }
  .opt2{
    color: #b084f8!important;
    background: rgba(176,132,248,0.15)!important;
    font-weight: bold!important;
    border-radius: 13px!important;
  }
  .opt3{
    color: #70cc3e!important;
    background: rgba(112,204,62,0.15)!important;
    font-weight: bold!important;
    border-radius: 13px!important;
  }
  .opt4{
    color: #f79f48!important;
    background: rgba(247,159,72,0.15)!important;
    font-weight: bold!important;
    border-radius: 13px!important;
  }
  .opt5{
    color: #f23a7b!important;
    background: rgba(242,58,123,0.15)!important;
    font-weight: bold!important;
    border-radius: 13px!important;
  }
  .opt6{
    color: #209e91!important;
    background: rgba(32,158,145,0.15)!important;
    font-weight: bold!important;
    border-radius: 13px!important;
  }
  .btn{
    background: #048dff!important;
    border-radius: 10px!important;
    color: #ffffff!important;
  }
  .btnAdd{
    background: #b3ddff!important;
    border-radius: 10px!important;
    font-weight: 500!important;
    color: #048dff!important;
  }
  .btnSubmit{
    background: #048dff!important;
    border-radius: 10px!important;
    font-weight: 500!important;
    color: #ffffff!important;
  }

  .data-item  .data-item-icon{
    width: 5px;
    min-height: 1px;
    text-align: center;
    margin-left: 15px;
  }
  .dialogBig{
    height: 80%!important;;
    width: 80%!important;
    margin-top: 10%;
  }
  .dialogFull{
    height: calc(100% - 135px)!important;
    width: calc(100% - 75px)!important;
    margin-top: 20px!important;
  }
.dialogFull .el-dialog__body{
  padding: 0;
  max-height: 100%;
}
.el-dialog__headerbtn{
  z-index: 999999;
}

.logo > img{
  margin-top: 10px;
  width: calc(369px* 2 / 3);
  height: calc(98px* 2 / 3);
}
  .index > img{
    margin-top: 10px;
    height: 40px;
  }

  .multiline-ellipsis1 {
    display: -webkit-box;           /* 使用旧版弹性盒子模型 */
    -webkit-box-orient: vertical;   /* 内容垂直排列 */
    -webkit-line-clamp: 1;          /* 限制显示行数 */
    overflow: hidden;               /* 隐藏溢出内容 */
  }
</style>
